Validation হল ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, যা নিশ্চিত করে যে ব্যবহারকারী শুধুমাত্র সঠিক তথ্য প্রদান করছে। ExtJS তে client-side validation এবং server-side validation দুটি ব্যবহৃত হয়, যেখানে client-side validation ব্যবহারকারীর ইনপুট ফর্মের আগে চেক করা হয় এবং server-side validation সার্ভার সাইডে ইনপুট যাচাই করা হয়। দুটোই নিরাপত্তা এবং ডেটার স্বচ্ছতা বজায় রাখার জন্য অপরিহার্য।
Client-side validation হল ফর্মের ইনপুট ডেটা যাচাই করার একটি প্রক্রিয়া যা ক্লায়েন্ট (ব্যবহারকারী) এর সিস্টেমে রান করে, সার্ভারের আগে। এটি সাধারণত দ্রুত ইনপুট যাচাই করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের দ্রুত প্রতিক্রিয়া প্রদান করে। ExtJS ফ্রেমওয়ার্কে Ext.form.field
(যেমন Ext.form.field.Text
, Ext.form.field.Number
, ইত্যাদি) এর মাধ্যমে ফিল্ড ভ্যালিডেশন করা হয়।
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
minLength: 3, // মিনি দৈর্ঘ্য ৩
maxLength: 20, // ম্যাক্স দৈর্ঘ্য ২০
vtype: 'email' // ইমেইল ভ্যালিডেশন
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
minLength: 6 // পাসওয়ার্ডের মিনি দৈর্ঘ্য ৬
}
],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) { // ফর্ম ভ্যালিডেশন চেক
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Error', 'Please fill all the required fields');
}
}
}]
});
এখানে:
allowBlank: false
: ব্যবহারকারী অবশ্যই একটি মান ইনপুট করতে হবে।minLength
এবং maxLength
: ইনপুটের দৈর্ঘ্য নির্ধারণ করা।vtype: 'email'
: ইমেইল ইনপুটের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।isValid()
: ফর্মের সব ফিল্ড ভ্যালিড কিনা তা চেক করে।আপনি যদি একটি কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তাহলে validator
প্রপার্টি ব্যবহার করতে পারেন।
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
validator: function(value) {
if (value < 18) {
return 'You must be at least 18 years old';
}
return true;
}
}
Server-side validation হল ইনপুট যাচাই করার প্রক্রিয়া যা সার্ভারে চলে, যেখানে ব্যবহারকারীর ইনপুট সার্ভারে পাঠানো হয় এবং সেখানে যাচাই করা হয়। এটি নিরাপত্তার জন্য গুরুত্বপূর্ণ, কারণ ক্লায়েন্ট সাইড ভ্যালিডেশন সহজে বাইপাস করা যায় এবং এটি ডেটার ইন্টিগ্রিটি রক্ষা করে।
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false
}
],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// Ajax রিকোয়েস্ট সার্ভারে পাঠানো
Ext.Ajax.request({
url: 'validateLogin.php', // সার্ভার সাইড স্ক্রিপ্ট
method: 'POST',
params: form.getValues(),
success: function(response) {
var result = Ext.decode(response.responseText);
if (result.success) {
Ext.Msg.alert('Success', 'Login successful');
} else {
Ext.Msg.alert('Failure', 'Invalid username or password');
}
},
failure: function() {
Ext.Msg.alert('Error', 'Server error');
}
});
}
}
}]
});
এখানে:
Ext.Ajax.request
ব্যবহার করা হয়েছে সার্ভারের সাথে যোগাযোগ করার জন্য।validateLogin.php
ফাইলকে POST রিকোয়েস্ট পাঠানো হচ্ছে।<?php
// validateLogin.php
$username = $_POST['username'];
$password = $_POST['password'];
// ডাটাবেস চেক বা অন্যান্য সার্ভার সাইড ভ্যালিডেশন
if ($username == 'admin' && $password == 'password') {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>
এখানে:
$_POST
দিয়ে ইনপুট ডেটা গ্রহন করা হচ্ছে এবং যাচাই করা হচ্ছে।Client-side validation দ্রুত ইউজার ইন্টারঅ্যাকশন এবং ব্যাচালর চেকিং এর জন্য ব্যবহৃত হয়, এবং Server-side validation ডেটার নিরাপত্তা এবং ইনটিগ্রিটি নিশ্চিত করে।
Read more